<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <title>16110100521-谭创浩</title>
  <link rel="stylesheet" type="text/css" href="res/layui/css/layui.css">
  <link rel="stylesheet" type="text/css" href="res/css/main.css">
<!--加载meta IE兼容文件-->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
  <div class="header">
    <div class="menu-btn">
      <div class="menu"></div>
    </div>
    <!-- <h1 class="logo">
      <a href="index.html">
        <span>TCH</span>
        <img src="../res/img/logo.png">
      </a>
    </h1> -->
    <div class="nav">
      <a href="index.html" class="active">首页</a>
      <a href="">案例一</a>
      <a href="">案例二</a>
      <a href="">案例三</a>
      <a href="">案例四</a>
    </div>
    <ul class="layui-nav header-down-nav">
      <li class="layui-nav-item"><a href="index.html" class="active">文章</a></li>
      <li class="layui-nav-item"><a href="whisper.html">案例一</a></li>
      <li class="layui-nav-item"><a href="leacots.html">案例一</a></li>
      <li class="layui-nav-item"><a href="album.html">案例一</a></li>
      <li class="layui-nav-item"><a href="about.html">案例一</a></li>
    </ul>
    <p class="welcome-text">
      16110100521<span class="name">谭创浩</span>
    </p>
  </div>

  <div class="banner">
    <div class="cont w1000">
      <div class="title">
        <h4><br />前端规范</h4>
        <h6>1书写规范：增强语义化，增强阅读性</h6>
        <h6>2规范目录，html/css/js/文件，合理分开</h6>
        <h6>3合理利用css命名规则</h6>
        <h6>4class用于标识某一个类型的对象，命名必须言简意赅</h6>
        <h6>5避免class与id重名</h6>
        <h6>6写属性值的时候尽量使用缩写。</h6>
        <h6>7驼峰式命名，驼峰式命名法由小(大)写字母开始，后续每个单词首字母都大写</h6>
        <h6>8尽量避免使用存在兼容性及消耗资源的方法属性</h6>
        <h6>9尽可能提高代码模块的复用，样式尽量用组合的方式</h6>
        <h6>10尽量减少使用float、position等影响性能的属性，这样可以避免新手在布局时出现的混乱</h6>
      </div>
      <!-- <div class="amount">
        <p><span class="text">访问量</span><span class="access">1000</span></p>
        <p><span class="text">日志</span><span class="daily-record">1000</span></p>
      </div> -->
    </div>
  </div>
  <div class="tlinks">Collect from <a href="http://www.cssmoban.com/" >网页模板</a></div>
  <div class="content">
    <div class="cont w1000">
      <div class="title">
        <span class="layui-breadcrumb" lay-separator="|">
          <a href="javascript:;" class="active">设计文章</a>
          <a href="javascript:;">前端文章</a>
          <a href="javascript:;">旅游杂记</a>
        </span>
      </div>
      <div class="list-item">
        <div class="item">
          <div class="layui-fluid">
            <div class="layui-row">
              <div class="layui-col-xs12 layui-col-sm4 layui-col-md5">
                <div class="img"><img src="res/img/001.jpg" alt=""></div>
              </div>
              <div class="layui-col-xs12 layui-col-sm8 layui-col-md7">
                <div class="item-cont">
                  <h3>jQuery案例<button class="layui-btn layui-btn-danger new-icon">new</button></h3>
                  <p> <a href="tb05/index.html">[选项卡1]</a></p>
                  <p><a href="选项卡/tab.html">[选项卡2]</a></p>
                  <p><a href="手机/jquery.1.html">[动画1]</a></p>
                  <p><a href="手机2/16.html">[动画2]</a></p>
                  <p><a href="absolute/absolute.html">[动画3]</a></p>
                  <p><a href="下一页/xiayiye.html">[下一页]</a></p>
                  
                </div>
            </div>
            </div>
           </div>
        </div>
        <div class="item">
          <div class="layui-fluid">
            <div class="layui-row">
              <div class="layui-col-xs12 layui-col-sm4 layui-col-md5">
                <div class="img"><img src="res/img/001.jpg" alt=""></div>
              </div>
              <div class="layui-col-xs12 layui-col-sm8 layui-col-md7">
                <div class="item-cont">
                  <h3>模仿网站</h3>
                  
                  <p>
                     <a href="模仿小米/index.html">模仿小米商城（部分）||</a>
                     <a href="https://www.mi.com">小米商城</a>
                  </p>
                  <p>
                      <a href="挂号平台/index.html">医院挂号平台||</a>
                      <a href="">来自慕课网前端小白教程成果物</a>
                   </p>
                </div>
            </div>
            </div>
           </div>
        </div>

        

        <div class="item">
          <div class="layui-fluid">
            <div class="layui-row">
              <div class="layui-col-xs12 layui-col-sm4 layui-col-md5">
                <div class="img"><img src="res/img/001.jpg" alt=""></div>
              </div>
              <div class="layui-col-xs12 layui-col-sm8 layui-col-md7">
                <div class="item-cont">
                  <h3>课堂案例</h3>
                  
                  <p>
                     <a href="ketang/2.27button.html">2.27button||</a>
                     <a href="ketang/2.27hello jquery.html">2.27hello jquery||</a>
                     <a href="ketang/3.4_append.html">3.4_append||</a>
                     <a href="ketang/3.4_gt和attr.html">3.4_gt和attr||</a>
                     <a href="ketang/3.4_toggleClass.html">3.4_toggleClass||</a>
                     <a href="ketang/3.6_hover方法.html">3.6_hover方法||</a>
                     <a href="ketang/3.6_tab选项卡(1).html">3.6_tab选项卡(1)||</a>
                     <a href="ketang/3.6_tab选项卡(2).html">3.6_tab选项卡(2)||</a>
                     <a href="ketang/3.11_下拉菜单.html">3.11_下拉菜单||</a>
                     <a href="ketang/3.11_动画效果.html">3.11_动画效果||</a>
                     <a href="ketang/3.13_ajax.html">3.13_ajax||</a>
                     <a href="ketang/3.13_ajax2.html">3.13_ajax2||</a>
                     <a href="ketang/3.20_animate.html">3.20_animate||</a>
                     <a href="ketang/3.25_ES6(2).html">3.25_ES6(2)||</a>
                     <a href="ketang/3.25_ES6(3).html">3.25_ES6(3)||</a>
                     <a href="ketang/3.25_ES6.html">3.25_ES6||</a>
                     <a href="ketang/3.27.html">3.27||</a>
                     <a href="ketang/3.27_1.html">3.27_1||</a>
                     
                    
                  </p>
                  <p>
                    <a href="ketang/3.11_动画效果.html">3.11_动画效果||</a>
                    <a href="ketang/3.13_ajax.html">3.13_ajax||</a>
                    <a href="ketang/3.13_ajax2.html">3.13_ajax2||</a>
                    <a href="ketang/3.20_animate.html">3.20_animate||</a>
                    <a href="ketang/3.25_ES6(2).html">3.25_ES6(2)||</a>
                    <a href="ketang/3.25_ES6(3).html">3.25_ES6(3)||</a>
                    <a href="ketang/3.25_ES6.html">3.25_ES6||</a>
                    <a href="ketang/3.27.html">3.27||</a>
                    <a href="ketang/3.27_1.html">3.27_1||</a>
                   </p>
                </div>
            </div>
            </div>
           </div>
        </div>
        
        <div class="item">
          <div class="layui-fluid">
            <div class="layui-row">
              <div class="layui-col-xs12 layui-col-sm4 layui-col-md5">
                <div class="img"><img src="res/img/001.jpg" alt=""></div>
              </div>
              <div class="layui-col-xs12 layui-col-sm8 layui-col-md7">
                <div class="item-cont">
                  <h3>ES6</h3>
                  
                  <p>
                     <a href="es6/es6-1变量作用域.html">es6-1变量作用域||</a>
                     <a href="es6/es6-2 es6数组相关知识点.html">es6-2 es6数组相关知识点||</a>
                     <a href="es6/es6-3 es6 foo.html">es6 foo||</a>
                     <a href="es6/es6-4 es6.html">es6-4 es6||</a>
                     <a href="es6/es6-5-for.html">es6-5-for||</a>
                     <a href="es6/es6-6动态属性.html">es6-6动态属性||</a>
                     <a href="es6/es6-7构造器.html">es6-7构造器||</a>
                     <a href="es6/es6-8symbol.html">es6-8symbol||</a>
                     
                  </p>
                  <p>
                    <a href="es6/es6-9SET和数组操作.html">es6-9SET和数组操作||</a>
                    <a href="es6/es-10promise.html">es-10promise||</a>
                    <a href="es6/es6-11异步.html">es6-11异步||</a>
                    <a href="es6/es-12异步sync.html">es-12异步sync||</a>
                    <a href="es6/es-13class.html">es-13class||</a>
                    <a href="es6/es6-14-1generator.html">es6-14-1generator||</a>
                    <a href="es6/es6-15-2generator.html">es6-15-2generator||</a>
                    <a href="es6/es6-16promoose.html">es6-16promoose||</a>
                    <a href="es6/es6-17module.html">es6-17module||</a>
                  </p>
                 
                </div>
            </div>
            </div>
           </div>
        </div>

        <div class="item">
          <div class="layui-fluid">
            <div class="layui-row">
              <div class="layui-col-xs12 layui-col-sm4 layui-col-md5">
                <div class="img"><img src="res/img/001.jpg" alt=""></div>
              </div>
              <div class="layui-col-xs12 layui-col-sm8 layui-col-md7">
                <div class="item-cont">
                  <h3>vue</h3>
                  
                  <p>
                     <a href="ketang/index.html">hello world||</a>
                     <a href="ketang/index1.html">自定义私有指令||</a>
                     <!-- <a href="ketang/index2.html">123||</a> -->
                     <!-- <a href="ketang/index24.html">hello world||</a> -->
                     <a href="ketang/index0506.html">1出现/消失/动画||</a>
                     <a href="ketang/index05061.html">2出现/消失/动画||</a>
                     <a href="ketang/index05062.html">双向绑定||</a>
                     <a href="ketang/index05081.html">删除列表||</a>
                     <a href="ketang/index05082.html">hellotan slot!!||</a>
                  </p>
                  
                </div>
            </div>
            </div>
           </div>
        </div>

        <div class="item">
          <div class="layui-fluid">
            <div class="layui-row">
              <div class="layui-col-xs12 layui-col-sm4 layui-col-md5">
                <div class="img"><img src="res/img/001.jpg" alt=""></div>
              </div>
              <div class="layui-col-xs12 layui-col-sm8 layui-col-md7">
                <div class="item-cont">
                  <h3>课后小玩意</h3>
                  
                  <p>
                     <a href="tanbiao/index.html">代挂接口查询||</a>
                     <a href="localStorage/index.html">localStorage测试||</a>
                     <a href="522/dashboard-analytics.html">网站换皮肤||</a>
                     <a href="https://www.jianshu.com/p/ba9efdec30ed">webpack vue步骤||</a>
                     <a href="https://www.jianshu.com/p/9806a9f70aa9">利用QQ邮箱发送邮件||</a>
                     <a href="https://www.jianshu.com/p/01bc759c4d39">axiox安装||</a>
                     <a href="https://www.jianshu.com/p/a6ea8e58be4c">tp5自动生成目录||</a>
                  </p>
                  
                </div>
            </div>
            </div>
           </div>
        </div>
  <!-- <div class="footer-wrap">
    <div class="footer w1000">
      <div class="qrcode">
        <img src="../res/img/erweima.jpg">
      </div>
      <div class="practice-mode">
        <img src="../res/img/down_img.jpg">
        <div class="text">
          <h4 class="title">我的联系方式</h4>
          <p>微信<span class="WeChat">1234567890</span></p>
          <p>邮箱<span class="email">1234567890@qq.com</span></p>
          <p>More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a></p>
        </div>
      </div>
    </div>
  </div>
  <script type="text/javascript" src="../res/layui/layui.js"></script>
  <script type="text/javascript">
    layui.config({
      base: '../res/js/util/'
    }).use(['element','laypage','jquery','menu'],function(){
      element = layui.element,laypage = layui.laypage,$ = layui.$,menu = layui.menu;
      laypage.render({
        elem: 'demo'
        ,count: 70 //数据总数，从服务端得到
      });
      menu.init();
    })
  </script> -->
</body>
</html>